<template>
  <div id="manager">
    <div id="top"></div>

    <header class="default-header">
      <div class="sticky-header">
        <div class="container">
          <div class="header-content d-flex justify-content-between align-items-center">
            <div class="right-bar d-flex align-items-center">
              <nav class="d-flex align-items-center">
                <ul class="main-menu">
                  <li>
                    <a style="color:white" href="/" target="_self">首页</a>
                  </li>
                  <li>
                    <a style="color:white" href="/square">广场</a>
                  </li>
                  <li>
                    <a style="color:white" href="https://www.babywang.huangsm.xyz/" target="_blank">博客</a>
                  </li>
                </ul>
                <a href="#" class="mobile-btn">
                  <span class="lnr lnr-menu"></span>
                </a>
              </nav>
               <div class="search relative">
                  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
              </div>
               <div v-if="user.username!==undefined" class="header-social d-flex align-items-center">
                <a href="/">
                  <i class="fa" style="color:white">{{user.username}}</i>
                </a>
                <a href="/login">
                  <i class="fa">
                    <img :src="user.userImage" width="50px" height="50px" :alt="user.username">
                  </i>
                </a>

                <a @click="logout()">
                  <i class="fa">退出登录</i>
                </a>
              </div>
              <div v-if="user.username===undefined" class="header-social d-flex align-items-center">
                <a href="/login">
                  <i class="fa">登录</i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <nuxt/>
  </div>
</template>
<style>
#manager{
  background-color: black;
}
</style>

<script>

import "~/assets/login/css/bootstrap.min.css";
import "~/assets/home/css/linearicons.css";
import "~/assets/home/css/owl.carousel.css";
import "~/assets/home/css/font-awesome.min.css";
import "~/assets/home/css/animate.css";
import "~/assets/home/css/bootstrap.css";
import "~/assets/home/css/main.css";
import { getUser, removeUser } from "@/utils/auth";

export default {
  data() {
    return {
      user: {}
    };
  },
  created() {
    this.user = getUser();
  },
  methods: {
    logout() {
      removeUser();
      location.href = "/";
    }
  }
};
</script>
